<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrap {
        width: 600px;
        height: 500px;
        background-color: #ccc;
        display: flex;
        justify-content: flex-start;

        /* overflow: auto; */
      }
      .item {
        /* flex-grow: 3; */
        flex-shrink: 0;
        /* width: 100px; */
        height: 100px;
        background-color: orange;
        /* 圆角 */
        border-radius: 50%;
        font-size: 40px;
        text-align: center;
        line-height: 100px;
      }

      /* .item:nth-child(2) { */
      /* align-self: flex-end; */
      /* order: -1; */
      /* } */
      /* .item:nth-child(3) {
        order: 5;
      } */

      .item:nth-child(1) {
        flex-basis: 100px;
        flex-grow: 1;
      }
      .item:nth-child(2) {
        flex-grow: 1;
      }
      .item:nth-child(3) {
        /* flex-grow: 2; */
        flex: 1 0 auto;
      }
      /* .item:nth-child(4) {
        width: 100px;
      } */
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

<!-- 
  给子元素加的属性
    1. align-self: 自己元素在交叉轴的排列方式
      flex-start: 侧轴开始的位置
      center: 侧轴中间的位置
      flex-end: 侧轴结束的位置

    2. order: 控制单个子元素的排列的位置
      整数
      默认值是0，越大越靠后

    3. flex-grow: 表示的是单个子元素的放大比例
      占据剩余空间的比例
      正整数，默认值是0

    4. flex-shrink: 表示的是单个子元素的缩小比例
      1: 默认值，当子元素的宽度超过了容器的宽度以后会被压缩
      0: 当子元素的宽度超过了容器的宽度以后不会被压缩

    5. flex-basis: 在分配剩余空间前所占的大小
      默认值是 auto

    6. flex
      是一个复合属性
      有三个值
      flex: <flex-grow> [flex-shrink] [flex-basis];
      绝大部分情况下，flex就当作flex-grow去用的
 -->
